<template>
  <div id="product">
    <div class="navbar">
      <div class="article-nav-wrapper">
        <nav class="article-nav container">
          <router-link class="nav-item nav-product on" to="product">产品</router-link>
          <router-link class="nav-item nav-design" to="design">设计</router-link>
          <router-link class="nav-item nav-develop" to="develop">开发</router-link>
          <router-link class="nav-item nav-test" to="test">测试</router-link>
          <router-link class="nav-item nav-operate" to="operation">运营</router-link>
        </nav>
      </div>
    </div>

    <div class="main-content clearfix">
      <article class="container">
        <ul class="article-main">
          <li class="article-heading clearfix">
            <span class="newArticle">产品</span>
            <router-link to="edit" class="edit-btn"><i class="glyphicon glyphicon-plus"></i>我要投稿</router-link>
          </li>
          <li class="article-item">
            <div class="article-content">
              <div class="author">
                <router-link class="author-avatar" to="personal">
                  <img src="../assets/img/user.jpg">
                </router-link>
                <div class="author-info">
                  <h4 class="author-topname">布莱恩特</h4>
                  <p class="publish-time">53分钟前</p>
                </div>
              </div>
              <div class="article-title">
                <span>原创</span>
                <router-link to="details">快速软件开发第一部分有效开发完成</router-link>
              </div>
              <p class="abstract">1920
                年代的巴黎几乎每个街角都有一间帽子店，自重的男人女人们从家里出来时没有一个不戴帽子的。帽子在当时不仅仅是地位的象征，还是通往时尚世界的途径：很多有名的女帽设计师后来都发展成了十分成熟的时装设计师，其中包括加布里埃·香奈儿（她更为知名的名字是
                Coco小姐）、简奴·朗万（Jeanne Lanvin）以及（两个世纪前的）罗斯·贝尔坦（Rose Bertin）——她还是玛丽.安托瓦内特皇后（Queen
                Marie-Antoinette）的女裁缝师。但是经过 1968 年巴黎的学生运动之后，法国年轻人抛弃了父母辈的着装习惯，标榜追求新自由，帽子也因此不再受欢迎。由于农场所在地的自然条件非常优渥，Botha 和
                Sofberg 家族多年来一直希望能通过进一步完善农场的设施，来推动当地旅游业的发展，以回馈当地的社区居民。因而在教堂之外，他们还建了一座带花园和餐厅的家庭旅馆，并计划再新增一所学校，推动当地的教育。</p>
              <div class="article-meta">
                <router-link to="details"><i class="fa fa-eye fa-lg"></i> 42</router-link>
                <a><i class="fa fa-heart-o fa-lg"></i> 2</a>
                <router-link to="details#comments"> <i class="fa fa-commenting-o fa-lg"></i> 1</router-link>
              </div>
            </div>
          </li>

          <li class="article-item">
            <div class="article-content">
              <div class="author">
                <router-link class="author-avatar" to="personal">
                  <img src="../assets/img/user.jpg">
                </router-link>
                <div class="author-info">
                  <h4 class="author-topname">布莱恩特</h4>
                  <p class="publish-time">53分钟前</p>
                </div>
              </div>
              <div class="article-title">
                <span>原创</span>
                <router-link to="details">快速软件开发第一部分有效开发完成</router-link>
              </div>
              <p class="abstract">1920
                年代的巴黎几乎每个街角都有一间帽子店，自重的男人女人们从家里出来时没有一个不戴帽子的。帽子在当时不仅仅是地位的象征，还是通往时尚世界的途径：很多有名的女帽设计师后来都发展成了十分成熟的时装设计师，其中包括加布里埃·香奈儿（她更为知名的名字是
                Coco小姐）、简奴·朗万（Jeanne Lanvin）以及（两个世纪前的）罗斯·贝尔坦（Rose Bertin）——她还是玛丽.安托瓦内特皇后（Queen
                Marie-Antoinette）的女裁缝师。但是经过 1968 年巴黎的学生运动之后，法国年轻人抛弃了父母辈的着装习惯，标榜追求新自由，帽子也因此不再受欢迎。由于农场所在地的自然条件非常优渥，Botha 和
                Sofberg 家族多年来一直希望能通过进一步完善农场的设施，来推动当地旅游业的发展，以回馈当地的社区居民。因而在教堂之外，他们还建了一座带花园和餐厅的家庭旅馆，并计划再新增一所学校，推动当地的教育。</p>
              <div class="article-meta">
                <router-link to="details"><i class="fa fa-eye fa-lg"></i> 42</router-link>
                <a><i class="fa fa-heart-o fa-lg"></i> 2</a>
                <router-link to="details#comments"> <i class="fa fa-commenting-o fa-lg"></i> 1</router-link>
              </div>
            </div>
          </li>

          <li class="article-item">
            <div class="article-content">
              <div class="author">
                <router-link class="author-avatar" to="personal">
                  <img src="../assets/img/user.jpg">
                </router-link>
                <div class="author-info">
                  <h4 class="author-topname">布莱恩特</h4>
                  <p class="publish-time">53分钟前</p>
                </div>
              </div>
              <div class="article-title">
                <span>转载</span>
                <router-link to="details">快速软件开发第一部分有效开发完成</router-link>
              </div>
              <p class="abstract">1920
                年代的巴黎几乎每个街角都有一间帽子店，自重的男人女人们从家里出来时没有一个不戴帽子的。帽子在当时不仅仅是地位的象征，还是通往时尚世界的途径：很多有名的女帽设计师后来都发展成了十分成熟的时装设计师，其中包括加布里埃·香奈儿（她更为知名的名字是
                Coco小姐）、简奴·朗万（Jeanne Lanvin）以及（两个世纪前的）罗斯·贝尔坦（Rose Bertin）——她还是玛丽.安托瓦内特皇后（Queen
                Marie-Antoinette）的女裁缝师。但是经过 1968 年巴黎的学生运动之后，法国年轻人抛弃了父母辈的着装习惯，标榜追求新自由，帽子也因此不再受欢迎。由于农场所在地的自然条件非常优渥，Botha 和
                Sofberg 家族多年来一直希望能通过进一步完善农场的设施，来推动当地旅游业的发展，以回馈当地的社区居民。因而在教堂之外，他们还建了一座带花园和餐厅的家庭旅馆，并计划再新增一所学校，推动当地的教育。</p>
              <div class="article-meta">
                <router-link to="details"><i class="fa fa-eye fa-lg"></i> 42</router-link>
                <a><i class="fa fa-heart-o fa-lg"></i> 2</a>
                <router-link to="details#comments"> <i class="fa fa-commenting-o fa-lg"></i> 1</router-link>
              </div>
            </div>
          </li>
          <a href="#" class="add-more">点击加载更多</a>
        </ul>
        <sidebar></sidebar>
      </article>
    </div>
  </div>
</template>

<script>
  import sidebar from '../components/aside.vue'

  export default {
    name: 'product',
    components: {
      sidebar,
    },
    data(){
      return{

      }
    },
    created(){
      this.$http.get('http://172.17.140.113:8360/api/postcategory').then(response => {
        if (response.body && response.body.errno != 0) {
          let msg = response.body ? response.body.errmsg : '请求异常！！！'
          console.log(msg)
          return
        }
        try {
          response = response.body.data
          console.dir(response)

        }
        catch(e){
          console.log("error")
        }

      }, response => {
        console.log(response)
      });
    },
  }
</script>

<style scoped>
  .main-content {
    margin: 40px auto;
    max-width: 1400px;
    padding: 0 24px;
    position: relative;
  }

  .article-nav-wrapper {
    width: 100%;
    height: 100px;
    background: #fff;
    margin: 0 auto;
  }

  .article-nav {
    padding: 20px 15px;
  }

  .nav-item {
    display: inline-block;
    width: calc((100% - 96px) / 5);
    line-height: 60px;
    text-align: center;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 600;
    transition: all .3s ease-in-out;
  }

  .article-nav .on {
    background: #c79efe;
    color: #fff;
  }

  .nav-item:hover, .nav-item:focus, .nav-item:active {
    color: #fff;
  }

  .nav-product {
    background: #f9f5ff;
    color: #c79efe;
    margin-right: 20px;
  }

  .nav-design {
    background: #edfaf3;
    color: #50cf8e;
    margin-right: 20px;
  }

  .nav-develop {
    background: #ffefd5;
    color: #febb50;
    margin-right: 20px;
  }

  .nav-test {
    background: #f0f7fe;
    color: #6dacf4;
    margin-right: 20px;
  }

  .nav-operate {
    background: #fef4f2;
    color: #f69581;
  }
  .nav-product:hover, .nav-product:focus, .nav-product:active {
    background: #c79efe;
  }

  .nav-design:hover, .nav-design:focus, .nav-design:active {
    background: #50cf8e;
  }

  .nav-develop:hover, .nav-develop:focus, .nav-develop:active {
    background: #febb50;
  }

  .nav-test:hover, .nav-test:focus, .nav-test:active {
    background: #6dacf4;
  }

  .nav-operate:hover, .nav-operate:focus, .nav-operate:active {
    background: #f69581;
  }

  .article-main {
    float: left;
    width: calc((100% - 30px) / 3 * 2);
    margin-right: 40px;
  }

  .article-heading {
    margin-top: 40px;
  }

  .newArticle {
    font-weight: 700;
    font-size: 24px;
    float: left;
  }

  .edit-btn {
    float: right;
    width: 99px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    background-color: #387aff;
  }

  .article-item {
    width: 100%;
    padding: 32px;
    margin-top: 20px;
    background: #fff;
    position: relative;
  }

  .publish-time {
    color: #777;
    margin: 0;
    font-size: 14px;
  }

  .article-title {
    padding: 4px 0 10px 0;
  }

  .article-title span {
    display: inline-block;
    vertical-align: text-bottom;
    background: #febb50;
    color: #fff;
    padding: 3px 6px;
    margin-right: 8px;
    border-radius: 4px;
  }

  .article-title a {
    font-weight: 600;
    font-size: 24px;
    color: #666;
  }

  .article-meta {
    padding-right: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 20px;
  }

  .article-meta a {
    color: #777;
    margin-right: 14px;
    display: inline-block;
  }

  .article-meta i {
    color: #387aff;
    vertical-align: 0;
    margin-right: 4px;
  }

  .article-meta a, .article-meta a:hover {
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    -ms-transition: .1s ease-in;
  }


  .author-info .author-topname {
    color: #387aff;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 26px;
    font-size: 17px;
  }

  .abstract {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    color: #777;
    line-height: 27px;
    padding-left: 0;
  }

  .article-main .author-avatar {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
    width: 46px;
    height: 46px;
    cursor: pointer;
  }

  .article-main .author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .article-main .author-info {
    display: inline-block;
    vertical-align: middle;
  }

  .article-item .author {
    margin-bottom: 14px;
  }

  .add-more {
    display: block;
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background: #fff;
    color: #387aff;
    margin-top: 20px;
  }

  @media screen and (max-width: 768px) {
    .main-content {
      margin: 40px auto;
      width: 100%;
      padding: 0;
      position: relative;
    }

    .article-main {
      float: left;
      width: calc(100%);
      margin-right: 0;
    }

    .article-nav-wrapper {
      height: 80px;
    }

    .nav-item {
      width: calc((100% - 16px) / 5);
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: 400;

    }

    .article-heading {
      margin-top: 0;
    }

    .edit-btn {
      display: none;
    }

    .nav-product {
      margin-right: 0;
    }

    .nav-design {
      margin-right: 0;
    }

    .nav-develop {
      margin-right: 0;
    }

    .nav-test {
      margin-right: 0;
    }

  }
</style>
